<template>
	<div>
		<el-tabs v-model="activeName" class="person-rec-contract-tabs" @tab-click="handleClick">
			<el-tab-pane label="当前委托" name="first">
				<template #default>
					<div class="mt-20px">
						<ContractCurrent />
					</div>
				</template>
			</el-tab-pane>
			<el-tab-pane label="历史委托" name="second">
				<template #default>
					<div class="mt-20px">
						<ContractHistory/>
					</div>
				</template>
			</el-tab-pane>
			<el-tab-pane label="历史成交" name="third">
				<template #default>
					<div class="mt-20px">
						<ContractTrade/>
					</div>
				</template>
			</el-tab-pane>
			<el-tab-pane label="止盈止损历史" name="fourth">
				<template #default>
					<div class="mt-20px">
						<ContractTake></ContractTake>
					</div>
				</template>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script lang="ts" setup>
import ContractCurrent from './components/ContractCurrent.vue';
import ContractHistory from './components/ContractHistory.vue';
import ContractTrade from './components/ContractTrade.vue';
import ContractTake from './components/ContractTake.vue';


const activeName = ref('first');

const handleClick = (tab:any, event:any) => {
	console.log(tab, event);
};
</script>
<style lang="scss">
.person-rec-contract-tabs{
	.el-tabs__nav-wrap:after{
		display: none;
	}
	.el-tabs__header{
		margin: 0;
	}
	.el-tabs__item{
		font-size: 16px;
		color:#86909C;
	}
	.is-active{
		color:#000000;
	}
	.el-tabs__active-bar{
		background-color: #114CEE;
		height: 4px;
	}
}
</style>

